<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import gdglService from '@/api/gdgl'

const departForm = ref()
// 入参
const form = ref({
  rylx: '',
  xm: '',
  zjlx: '',
  zjhm: '',
  xb: '',
  csrq: '',
  mz: '',
  gj: '',
  hjszd: '',
  cljg: '',
})
// 生命周期
onMounted(() => {
  // 查询表单数据
  queryFormData()
})

/*
 * 查询表单数据
 */
const queryFormData = () => {
  const params = {}
  // gdglService
  //   .queryRyxxList(params)
  //   .then((res) => {
  //     //
  //   })
  //   .catch((err) => {
  //     !err.isError && ElMessage({ type: 'warning', message: err.message })
  //   })
}

const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      //
    } else {
      ElMessage({ type: 'warning', message: '请补全信息' })
    }
  })
}
</script>
<template>
  <div class="container">
    <div class="top-button">
      <button class="btn_operation" @click="save(departForm)">
        <div class="btn-save"></div>
        保存
      </button>
    </div>
    <div class="content-table">
      <!-- :rules="formRules"  -->
      <div class="table-title">褚庆华</div>
      <el-form ref="departForm" :model="form" class="demo-ruleForm">
        <table class="form-table">
          <tbody>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                人员类型
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="rylx">
                  <el-select
                    v-model="form.rylx"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  >
                    <!-- <el-option
                      v-for="zrritem in selectCtrlData.rylx.data"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option> -->
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                姓名
              </td>
              <td class="text">
                <el-form-item prop="xm" style="width: 100%">
                  <el-input v-model="form.xm" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                证件类型
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zjlx">
                  <el-input v-model="form.zjlx" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                证件号码
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zjhm">
                  <el-input v-model="form.zjhm" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">性别</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.xb" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">出生日期</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.csrq"
                    type="date"
                    placeholder="请选择"
                    size="small"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    disabled
                  />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">民族</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.mz"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">国籍</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.gj" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">户籍所在地</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.hjszd"></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">处理结果</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.cljg" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top-button {
    width: 100%;
    text-align: right;
  }

  .content-table {
    padding-bottom: 10px;
    margin-top: 5px;
    border: 1px solid #d4e6f4;
    .table-title {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      background-color: #d4e6f4;
      padding-left: 5px;
      border-bottom: 1px solid #d4e6f4;
    }
  }
}

.form-table {
  width: 100%;
  margin-top: 10px;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    // font-size: $fontsize_default;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

.demo-ruleForm {
  padding: 0 10px;
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
